<!--
 * @Descripttion: 人员通行
 * @version:
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-08-10 14:16:14
-->

<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区：">
            <el-select v-model="filters.CID" filterable @change="changeCID" placeholder="请选择" clearable>
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="filters.CID" label="设备点位">
            <el-select v-model="filters.sn" filterable placeholder="请输入设备名称" clearable>
              <el-option v-for="item in deviceList" :key="item.sn" :label="item.name" :value="item.sn"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input
              v-model="filters.personName"
              placeholder="请输入内容"
              clearable
              @keydown.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证：">
            <el-input
              v-model="filters.Idcard"
              placeholder="请输入内容"
              clearable
              @keydown.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="陌生人：">
            <el-select v-model="filters.type" placeholder="请选择" @change="handleQuery" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进出方向">
            <el-select
              v-model="filters.equipment"
              filterable
              placeholder="请选择进出方向"
              @keydown.enter.native="refreshPageRequest(1)"
              @change="refreshPageRequest(1)"
              clearable
            >
              <el-option
                v-for="item in sblist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员类型：">
            <el-select v-model="filters.types" placeholder="请选择" @change="handleQuery" clearable>
              <el-option v-for="item in types" :key="item.DID" :label="item.name" :value="item.DID"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="性别：">
            <el-select v-model="filters.Sex" placeholder="请选择" @change="handleQuery" clearable>
              <el-option
                v-for="item in optionsSex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起始时间：">
            <el-date-picker
              class="normal"
              v-model="filters.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              class="normal"
              v-model="filters.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item v-show="true">
            <audio id="audio" controls="controls" style="width: 1px; height: 1px">
              <source src="./JB.mp3" />
            </audio>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button type="primary" @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column prop="name" header-align="center" align="center" label="姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CName" header-align="center" align="center" label="小区名称"></el-table-column>
          <el-table-column prop="Idcard" header-align="center" align="center" label="身份证号">
            <template slot-scope="scope">
              <span v-if="photoCheck == scope.row.photoCheck">{{ scope.row.idCard }}</span>
              <span v-else>{{ hideOfString(scope.row.idCard) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" header-align="center" align="center" label="陌生人">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0" class="fontColor">是</span>
              <span v-if="scope.row.type == 1">否</span>
            </template>
          </el-table-column>
          <el-table-column prop="IName" header-align="center" align="center" label="设备点位"></el-table-column>
          <el-table-column prop="direction" header-align="center" align="center" label="进出方向">
            <template slot-scope="scope">
              <span v-if="scope.row.direction === 2">出</span>
              <span v-if="scope.row.direction === 1">进</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceid" header-align="center" align="center" label="人员类型">
            <template slot-scope="scope">
              <span v-if="scope.row.person && scope.row.person.type">
                {{
                  scope.row.person.type
                    ? types.find((item) => {
                        return item.DID == scope.row.person.type;
                      }).name
                    : '-'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="insertTime"
            header-align="center"
            align="center"
            label="通行时间"
          ></el-table-column>
          <el-table-column prop="jiankang" header-align="center" align="center" label="健康码">
            <template slot-scope="scope">
              <span>{{ gethcStatus(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="getCheckEncryption() ? handleEdit(scope.row) : (isCheckEncryption = true)"
                v-show="hasPerm('pass:personpass:details')"
              >
                查看照片
              </el-button>
              <el-button
                type="warning"
                size="mini"
                @click="
                  getCheckEncryption() ? get_sensitive_fields(scope.row, checkPhoto) : (isCheckEncryption = true)
                "
                v-show="hasPerm('pass:personpass:show')"
              >
                查看
              </el-button>
              <el-button
                type="danger"
                @click="handleDelete(scope.row)"
                v-show="hasPerm('party:importNews:remove')"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 弹框 -->
        <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="30%">
          <img style="width: 100%" :src="getItemPhoto(currentImg)" class="imgDia" />
        </el-dialog>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <el-dialog title="身份验证" :visible.sync="isCheckEncryption">
      <CheckEncryption @close="isCheckEncryption = false"></CheckEncryption>
    </el-dialog>
    <!-- 详情的弹窗 -->
  </div>
</template>

<script>
import CheckEncryption from '@/components/CheckEncryption';
export default {
  components: {
    CheckEncryption
  },
  data() {
    return {
      isCheckEncryption: false,
      sblist: [
        { label: '出', value: '1' },
        { label: '进', value: '2' }
      ],
      equipmentLoading: false,
      deviceList: [],
      currentImg: '',
      dialogVisible: false,
      aside: false,
      asideShow: false,
      unitShow: false,
      viewVisible: false,
      topTime: true,
      pageResult: [],
      selections: [],
      dataFormView: [],
      filters: {
        CID: '',
        startTime: '',
        endTime: '',
        status: '',
        type: 1,
        Sex: '',
        personName: '',
        Idcard: ''
      },
      pageRequest: {
        page: 1,
        limit: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      mutime: null,
      options: [
        {
          value: 0,
          label: '陌生人'
        },
        {
          value: 1,
          label: '非陌生人'
        }
      ],
      types: [],
      optionsSex: [
        {
          value: 0,
          label: '男'
        },
        {
          value: 1,
          label: '女'
        }
      ],
      getCommunity: [],
      photoCheck: 0
    };
  },
  watch: {
    topTime(newv, old) {
      if (newv == false) {
        this.getWaringmusic();
      }
    }
  },
  methods: {
    gethcStatus(row) {
      if (!row.hcStatus) return '-';
      let n = '-';
      switch (row.hcStatus) {
        case '00':
          n = '绿码';
          break;
        case '01':
          n = '黄码';
          break;
        case '10':
          n = '红码';
          break;
        case '11':
          n = '灰码';
          break;
        default: {
        }
      }
      return n;
    },
    playmusic() {
      var audio = document.getElementById('audio');
      audio.play();
    },
    pasuemusic() {
      var audio = document.getElementById('audio');
      audio.pause();
    },
    async changeCID() {
      this.deviceList = await this.getDevice();
    },

    async getDevice(param = '') {
      this.equipmentLoading = true;
      let rs = await this.$api.resource.finddetailPage({
        name: param,
        CID: this.filters.CID
      });
      this.equipmentLoading = false;
      if (rs.code !== 0) return [];
      return rs.data;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //查看
    checkPhoto(row) {
      if (row.photoCheck == this.photoCheck) {
        this.photoCheck = 0;
      } else {
        this.$nextTick(() => {
          //nextTick并不是用来监听DOM变更，它的作用是一次性更改数据，并且渲染DOM
          this.$set(this.pageResult, this.photoCheck - 1, row);
        });
        this.photoCheck = row.photoCheck;
      }
    },
    //名字脱敏
    formatName(name) {
      var newStr;
      if (name.length === 2) {
        newStr = name.substr(0, 1) + '*';
      } else if (name.length > 2) {
        var char = '';
        for (var i = 0, len = name.length - 2; i < len; i++) {
          char += '*';
        }
        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
      } else {
        newStr = name;
      }
      return newStr;
    },
    // 获取分页数据
    handleQuery: function (val) {
      this.loading = true;
      let params = {};
      params = {
        where: this.filters,
        page: val ? '' : this.pageRequest.page,
        limit: 10
      };

      this.$api.personPass
        .personPassFind(params)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            this.pageResult = res.data;
            this.totalSize = res.count;
            this.pageResult.map((item, index) => {
              item.insertTime = this.$format(item.insertTime);
              if (item.info && item.info.persionName && item.info.Idcard) {
                item.name = item.info.persionName || '';
                item.idCard = item.info.Idcard;
                item.PID = item.person_id;
                item.names = this.formatName(item.name);
              }
              if (item.device) {
                item.IName = item.device.Name;
              }
              if (item.person && item.person.info) {
                item.idCard = item.person.info.Idcard;
              } else {
                item.idCard = '-';
              }
              item.photoCheck = index + 1;
              item.picImg = this.global.baseUrlImage + 'pic/' + item.pic;
            });
          } else {
            this.loading = false;
            this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message({
            type: 'error',
            message: '请求超时' + err
          });
        });
    },
    getWaringmusic() {
      let params = {
        times: '3600000'
      };
      this.$api.warn.sys_check_warning(params).then((res) => {
        this.topTime = res.isStopTimer;
        if (res.data == true && res.isStopTimer == false) {
          this.playmusic();
          setTimeout(() => {
            this.pasuemusic();
          }, 3000);
        }
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let params = {
          dbName: 'business_pass',
          _id: row._id
        };
        let param = JSON.stringify(params);
        this.$api.wxNotic.remove_every(param).then((res) => {
          this.editLoading = false;
          if (res.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });

            this.handleQuery();
          } else {
            this.$message({
              message: '操作失败, ' + res.msg,
              type: 'error'
            });
          }
        });
      });
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + 'pic/' + id;
      return url;
    },
    //获取小区的列表选择器
    getCommunityList() {
      let params = {};
      params = {
        where: {
          CODES: []
        }
      };
      let param = JSON.stringify(params);
      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          this.getCommunity = res.data;
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
    },
    // 显示编辑界面
    handleEdit: function (params) {
      if (params.pic) {
        this.currentImg = params.pic;
      }
      this.dialogVisible = true;
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    }
  },
  async mounted() {
    // this.mutime= setInterval(()=>{
    // this.getWaringmusic()
    // },10000)
    this.filters.CID = localStorage.getItem('home_CID');
    let dictList = JSON.parse(sessionStorage.getItem('dictData'));
    this.types = dictList.sys_person_type;
    this.handleQuery();
    this.getCommunityList();
  }
  // destroyed(){
  //     if(this.mutime){
  //       clearInterval(this.mutime)
  //     }
  // }
};
</script>

<style scoped>
.el-dialog__body {
  display: flex;
  justify-content: center !important;
}

.fontColor {
  color: red;
}
</style>
